<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>毒鸡汤</title>
    <style>
        body {
            height: 100vh;
            margin: 0;
            position: relative;
            background-color: #374858;
        }

        .parent {
            width: 100%;
            height: 100%;
            position: relative;
        }

        .parent .child {
            color: white;
        }

        .parent {
            text-align: center;
            vertical-align: middle;
        }

        .parent .child {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 97%;
        }

        .reload {
            position: absolute;
            top: 10px;
            right: 10px;
            cursor: pointer;
            z-index: 99;
        }
    </style>
</head>

<body>
    <div class="reload" title="重新来过">
        <svg t="1646127636734" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="2982" width="32" height="32">
            <path
                d="M514.024727 23.272727c170.845091 0 321.861818 94.021818 403.409455 235.776l70.865454-17.501091a23.272727 23.272727 0 0 1 28.392728 27.229091l-45.661091 225.117091a44.869818 44.869818 0 0 1-33.489455 34.676364 49.617455 49.617455 0 0 1-47.522909-13.986909l-164.189091-172.334546a23.272727 23.272727 0 0 1 11.287273-38.632727l85.317818-21.108364C754.525091 181.620364 640.977455 116.363636 514.024727 116.363636 307.502545 116.363636 139.636364 288.046545 139.636364 500.363636 139.636364 712.680727 307.502545 884.363636 514.024727 884.363636a366.545455 366.545455 0 0 0 228.375273-79.685818 46.545455 46.545455 0 1 1 57.716364 73.029818A459.589818 459.589818 0 0 1 514.048 977.454545C255.604364 977.454545 46.545455 763.624727 46.545455 500.363636S255.604364 23.272727 514.024727 23.272727z"
                p-id="2983" fill="#1aaf5d"></path>
        </svg>
    </div>
    <div class="parent">
        <div class="child">
            <span id="sentence" style="font-size: 2rem;"></span>
        </div>
    </div>

    <script src="./lib/jquery.min.js"></script>
    <script>
        var dataArr = [];

        var page = {
            init: function () {
                $(".reload").click(function () {
                    page.rand();
                });
                page.rand();
            },
            initData: function () {
                $.ajaxSettings.async = false;
                $.get("./lib/bad.json", function (data) {
                    dataArr = data;
                })
            },
            rand: function () {
                if (dataArr.length <= 10) {
                    page.initData();
                }
                var value = dataArr[Math.floor(Math.random() * dataArr.length)];
                var index = dataArr.indexOf(value);
                dataArr.splice(index, 1);
                $("#sentence").text(value.text);
            }
        }

        page.init();
    </script>
</body>

</html>